/* =========================================
   1. THEME VARIABLES
   ========================================= */
:root {
    --col-purple: #4A144B;
    --col-dark-purple: #1f0b20;
    --col-pink: #ff3399;
    --col-gold: #d4af37;
    
    --bg-body: #f9f9f9;
    --bg-white: #ffffff;
    
    --font-post-head: 'Playfair Display', serif;
    --font-post-body: 'Outfit', sans-serif;
    
    --radius-card: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    font-family: var(--font-post-body) !important; background: var(--bg-body); 
    color: #333; overflow-x: hidden;
}

.episode-header {
    padding: 15px 40px; display: flex; justify-content: space-between; align-items: center;
    background: var(--col-dark-purple); color: white; /* Dark Header for Cinema Mode */
    position: sticky; top: 0; z-index: 1000;
}
.brand { font-family: var(--font-post-head); font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.brand span { color: var(--col-pink); }
.back-link { font-size: 0.9rem; color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 8px; font-weight: 500; }
.back-link:hover { color: white; }
        
a { text-decoration: none; color: inherit; transition: 0.3s; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 30px; }


/* =========================================
   3. THEATER MODE (Video Player)
   ========================================= */
.theater-section {
    background: var(--col-dark-purple); padding: 20px 0 80px 0;
}

.video-container {
    position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0; overflow: hidden; border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    background: black;
}
.video-container iframe, .video-container video, .video-placeholder {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* Placeholder for design purpose */
.video-placeholder {
    background: url('https://images.unsplash.com/photo-1629260515234-a82f3c32936e?auto=format&fit=crop&w=1200&q=80') center/cover;
    display: flex; align-items: center; justify-content: center;
}
.big-play {
    width: 80px; height: 80px; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px);
    border-radius: 50%; display: flex; justify-content: center; align-items: center;
    color: white; font-size: 2rem; cursor: pointer; transition: 0.3s; border: 1px solid rgba(255,255,255,0.3);
}
.big-play:hover { background: var(--col-pink); transform: scale(1.1); border-color: var(--col-pink); }

/* =========================================
   4. CONTENT LAYOUT (Split)
   ========================================= */
.content-layout {
    display: grid; grid-template-columns: 2fr 1fr; gap: 50px;
    margin-top: -40px; position: relative; z-index: 10; padding-bottom: 80px;
}

/* --- LEFT SIDE: Details --- */
.main-info {
    background: white; border-radius: 20px; padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.ep-meta { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.ep-tag { color: var(--col-pink); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; }
.ep-actions { display: flex; gap: 15px; }
.action-btn { 
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid #eee;
    display: flex; justify-content: center; align-items: center; color: #666; cursor: pointer;
    transition: 0.3s;
}
.action-btn:hover { background: var(--col-purple); color: white; border-color: var(--col-purple); }

.ep-title { font-family: var(--font-post-head); font-size: 2.5rem; line-height: 1.1; margin-bottom: 15px; color: var(--col-purple); font-weight:600; }
.ep-desc { font-size: 1.05rem; line-height: 1.7; color: #555; margin-bottom: 30px; }

/* Host Profile (Simplified) */
.host-row { 
    display: flex; gap: 20px; align-items: center; margin-top: 30px; 
    border-top: 1px solid #eee; padding-top: 30px; 
}
.host-lg { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.host-info h4 { font-size: 1.1rem; margin-bottom: 5px; font-weight:600; color:var(--col-purple); }
.host-guest { color: var(--col-pink); }
.host-info p { font-size: 0.9rem; color: #666; }

/* --- RIGHT SIDE: Playlist --- */
.playlist-card {
    background: white; border-radius: 20px; padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); height: fit-content;
}
.pl-header { font-family: var(--font-post-head); font-size: 1.3rem; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; }

.up-next-item {
    display: flex; gap: 15px; margin-bottom: 20px; cursor: pointer; group;
}
.up-next-item:last-child { margin-bottom: 0; }

.up-thumb-box { position: relative; width: 100px; height: 70px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.up-thumb { width: 100%; height: 100%; object-fit: cover; transition:0.3s; }
.up-next-item:hover .up-thumb { transform: scale(1.1); }

.playing-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center;
    color: white; font-size: 0.8rem; font-weight: 700;
}

.up-info h5 {
    color: var(--col-purple);
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 5px;
    line-height: 1.5;
    transition: 0.3s;
}
.up-next-item:hover .up-info h5 { color: var(--col-pink); }
.up-meta { font-size: 0.75rem; color: #999; }

/* Responsive */
@media (max-width: 900px) {
    .brand { display:none; }
    .content-layout { grid-template-columns: 1fr; margin-top: 0; }
    .theater-section { padding-bottom: 30px; }
    .video-container { border-radius: 0; } 
    .main-info { border-radius: 0; box-shadow: none; padding: 30px 20px; }
    .container { padding: 0; } 
    .ep-title {
        font-size: 1.5rem;
        color: #1f0b20;
        line-height: 1.5;
    }
    .playlist-card { margin: 0 20px 40px 20px; }
    .host-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px;
        background: #f9f9f9;
        border-radius: 12px;
        border: 1px solid #eee;
    }
    .host-row {
        background: #eee;
        padding: 10px;
        border-radius: 10px;
        color: #1F0B20;
    }
}